<!--
 * @Date: 2023-02-23 10:18:43
 * @LastEditTime: 2023-05-17 12:07:13

 * 介绍:
-->
<script lang="ts" setup>
import { BorderStyle } from "@@/components/types";
const props = withDefaults(
  defineProps<{
    borderColor?: string;
    borderStyle?: BorderStyle;
    borderWidth?: string;
    border?: boolean;
  }>(),
  {
    borderStyle: "solid",
    borderColor: "var(--C-T1-O5)",
    borderWidth: "1rem",
    border: false,
  }
);
</script>

<template>
  <div
    :class="{
      CgcCol__border: props.border,
    }"
    class="CgcCol"
    :style="{
      '--CgcCol-borderColor': props.borderColor,
      '--CgcCol-borderWidth': props.borderWidth,
      '--CgcCol-borderStyle': props.borderStyle,
    }"
  >
    <slot></slot>
  </div>
</template>

<style lang="scss" scoped>
.CgcCol {
  word-break: break-all;
  --border: var(--CgcCol-borderStyle) var(--CgcCol-borderColor)
    var(--CgcCol-borderWidth);
}
.CgcCol__border {
  & + .CgcCol__border {
    border-left: var(--border);
  }
}
</style>
